<template>
	<view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>

</style>
<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<!-- 	<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :show-bar="showBar" :current="current"
					@change="change" :is-scroll="false" swiperWidth="750">
				</u-tabs-swiper> -->
				<u-tabs :list="list" lineWidth="20" lineHeight="7" lineColor="#f29100" :activeStyle="{
				        color: '#303133',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" itemStyle="padding-left:28px; padding-right:15px;height: 34px; box-sizing:border-box; margin-bottom:10rpx; text-aline:center"
					:current="this.current" @change="change">
				</u-tabs>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res,index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待付款</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{priceDecimal(res.countmoney)}}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill"
												color="rgb(203,203,203)"></u-icon></view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn">立即支付</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
							</block>

						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res, index) in  orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待发货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill"
												color="rgb(203,203,203)"></u-icon></view>
										<view class="logistics btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn">提醒发货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
							</block>

						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<block v-if="dataBuffer">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res,index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待确认</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{priceDecimal(res.countmoney)}}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill"
												color="rgb(203,203,203)"></u-icon></view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn">确认收货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res, index) in  orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right" v-if="res.status == 0">待支付</view>
										<view class="right" v-else-if="res.status == 1">待发货</view>
										<view class="right" v-else-if="res.status == 2">待收货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left">
											<image :src="item.img" mode="aspectFill"></image>
										</view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill"
												color="rgb(203,203,203)"></u-icon></view>
										<block v-if="res.status ==0">
											<view class="exchange btn">继续购买</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">立即支付</view>
										</block>
										<block v-else-if="res.status ==1">
											<view class="logistics btn">继续购买</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">提醒发货</view>
										</block>
										<block v-else-if="res.status ==2">
											<view class="logistics btn">查看物流</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">确认收货</view>
										</block>
									</view>
								</view>
								<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	// 引入订单为空提示组件
	import ordernull from '@/components/ordernull/ordernull.vue';

	export default {
		components: {
			ordernull
		},
		data() {
			return {
				showBar: true, //初始化底部滑块开关
				orderList: [], //初始化订单列表数据

				dataBuffer: true, //数据展示开关
				list: [{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '全部订单',
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				size: 2,
				page: 1,
				totalPage: 0
			};
		},
		onLoad(option) {

			// 兼容百度小程序
			// #ifdef MP-BAIDU
			this.showBar = false;
			// #endif
			console.log(option);
			// 处理不同的订单状态 （默认请求状态是0的数据）
			let status = option.status || 3;
			// 给轮播图和current赋值
			this.swiperCurrent = status;
			this.current = status;
			this.getOrderList()
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			// 下拉加载更多
			reachBottom() {

				this.page++;
				if (this.page > this.totalPage) {
					//如果页面大于总页码
					this.loadStatus.splice(this.swiperCurrent, 1, "nomore")
					console.log(this.page, this.totalPage);
					return false
				}
				this.getOrderList()
			},
			async getOrderList() {
				//在请求之前把.loadStatus的数组设置为loding
				this.loadStatus.splice(this.swiperCurrent, 1, "loding")
				let {
					token,
					uid
				} = uni.getStorageSync("userInfo")
				let {
					size,
					page
				} = this
				let options = {
					url: "/orderlist",
					data: {
						uid,
						size,
						page,
						//如果传的值是3 就是空的 
						status: this.swiperCurrent == 3 ? "" : this.swiperCurrent
					},
					header: {
						authorization: token
					}
				}
				// console.log(options);
				let result = await this.$http(options)
				console.log(result);
				if (result.data.code == 403) {
					uni.showToast({
						title: "登陆过期！",
						icon: "error"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1000)
				}
				if (result.data.code == 200) {
					if (result.data.list == null) {
						//请求成功但是没数据 把没有数据的组件打开
						this.dataBuffer = true
					} else {
						//有数据要做的逻辑
						this.dataBuffer = false
						this.totalPage = result.data.list.totalPage
						console.log(result.data.list.totalPage);
						console.log(result.data.list.data);
						//拼接图片路径
						result.data.list.data.forEach(item => {
							item.child.forEach(item1 => {
								item1.img = this.$baseUrl + item1.img
							})
						})
						// result.data.list.data.child.forEach(item => {
						// 	item.img = this.$baseUrl + item.img
						// })
						console.log(this.page, this.totalPage);
						//加载更多的时候拼接数据
						this.orderList = this.orderList.concat(result.data.list.data)
						this.loadStatus.splice(this.swiperCurrent, 1, "loadmore") //改变load值


					}
				}
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index.index;
				console.log(this.orderList);
				this.orderList = [] //每次切换前都清空
				// this.getOrderList()

			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current;
				this.current = current;
				this.page = 1
				this.orderList = [] //每次切换前都清空
				this.getOrderList()
			},
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
	::v-deep .u-tabs__wrapper__nav {
		justify-content: space-between !important;
	}
</style>
<style lang="scss" scoped src="./orderlist.scss">
</style>